<style>
    .time {
        font-size: 13px;
        color: #999;
    }

    .bottom {
        margin-top: 13px;
        line-height: 12px;
    }

    .button {
        padding: 0;
        float: right;
    }

    .image {
        width: 100%;
        display: block;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }
</style>
<template>

    <el-main>
        <div class="main-box">
            <el-form :inline="true">
                <el-form-item style="float: right">
                    <el-button size="small"   v-role:test.add type="primary" v-link="'test/test1'">新建客户</el-button>
                </el-form-item>
                <el-form-item label="名称">
                    <el-input size="small" v-role:test.search.name  placeholder="名称"></el-input>
                </el-form-item>
                <el-form-item label="描述">
                    <el-input size="small"  v-role:test.search.des placeholder="描述"></el-input>

                </el-form-item>
                <el-button size="small" v-role:test.search.b  type="primary" v-link="'role/index'">检索</el-button>
            </el-form>
            <table class="table">
                <thead>
                <tr>
                    <th v-role:test.line1>框架名称</th>
                    <th v-role:test.line2>描述</th>
                    <th v-role:test.line3>地址</th>
                    <th v-role:test.line4>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(item,index) in data">
                    <td v-role:test.line1.$h>{{item.name}}</td>
                    <td v-role:test.line2.$h>{{item.des}}</td>
                    <td v-role:test.line3.$h><a target="_blank" :href="item.address">{{item.address}}</a></td>
                    <td v-role:test.line4.$h>
                        <el-button type="success" v-role:test.b1="index==0"  size="small">管理员</el-button>
                        <el-button type="primary" v-role:test.b2="index==0"  size="small">开通应用</el-button>
                        <el-button type="primary" v-role:test.b3="index==0" size="small" >客户资料</el-button>
                    </td>
                </tr>
                </tbody>
            </table>
bt


            <div class="pagination" style="margin-top: 12px;">
                <el-pagination
                        background
                        :page-size="12"
                        :current-page="1"
                        layout="total,sizes,prev, pager, next, jumper"
                        :total="32">
                </el-pagination>
            </div>
            <div class="clear"></div>
        </div>
    </el-main>

</template>
<script>
    //这里定义组件
    Rap.define('parent',[], {
        data: function () {
            return {
                x:false,
                data: [{name:'VUE',des:'一套用于构建用户界面的渐进式(MVVM)框架',address:'https://cn.vuejs.org/v2/guide/'},
                    {name:'VUE-RAP',des:'可以在不使用大量前端工具(如npm,webpack,Browserify等)的情况下快速构建单页面应用',address:'https://gitee.com/tengzhinei/Vue-rap'},
                    {name:'VUE-ROLE',des:'VUE可视化权限管理权组件',address:'https://gitee.com/tengzhinei/vue-role'},
                    {name:'RapPHP',des:'支持 SWOOLE 的全 web PHP开发框架(IOC,AOP,ORM,SWOOLE)',address:'http://rapphp.com/'}
                ]
            }
        },
        init:function (query,search) {
        },
        methods: {
            toAppDetail:function (item) {

            }
        }
    })
</script>